<template>
    <el-header :style="{background:bg.bgColor}">
        <!-- 头部整体盒子 -->
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-custom inner"
                mode="horizontal"
                @select="handleSelect"
                :background-color="bg.bgColor"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="-1" class="custom-logo">
                <template>
                    <div class="logo">
                      <a title="" href=""></a>
                    </div>
                </template>
            </el-menu-item>
            <el-submenu v-for="(item,index) in nav"  :index="index" >
                <template slot="title">{{item.catname}}</template>

                <el-menu-item v-for="(it,ind) in item.children" :index="index+'_'+ind">{{it.catname}}</el-menu-item>

            </el-submenu>

            <el-menu-item index="-2">

                <template>
                    <i class="el-icon-search" @click="search"></i>
                </template>
            </el-menu-item>
            <el-menu-item index="-3">
                <template>
                    <i class="el-icon-user" @click="search"></i>
                    登录/注册
                </template>
            </el-menu-item>

        </el-menu>


        <el-drawer
                size="40%"
                title="菜单栏"
                :visible.sync="isShow"
                :direction="direction"
                :before-close="handleClose">

            <el-tree v-if="nav" :data="nav" :props="defaultProps" :default-expand-all="true"
                     @node-click="jumpTo"></el-tree>
        </el-drawer>

        <Search :isShow="isShowSearch"></Search>


    </el-header>


</template>
<script>
  import Search from '../article/search.vue'
  import {treeDataTranslate} from '@/utils'
  export default {
    name: 'Head',
    components: {
      Search
    },
    data () {
      return {
        isShow: false,
        nav: [],
        navIndex: 0,
        bg:{
          bgColor:'#34495E'
        },
        direction: 'rtl',
        isShowSearch: false,//是否显示搜索栏
        defaultProps: {
          children: 'parent',
          label: 'catname'
        }
      }
    },
    mounted () {
      this.getNav()
    },
    methods: {

      handleClose () {
        this.isShow = false
      },
      /**
       * 显示导航
       * */
      showNav () {
        this.isShow = true
      },
      /**
       * 获取导航条
       */
      getNav () {
        console.log('get nav')
        this.$http({
          url: 'category',
          method: 'get'
        }).then(res => {
          console.log('r', res)
          if (res.code == 200) {
             this.nav = treeDataTranslate(res.data, 'catid', 'parentid');
          }
        })
      },
      jumpTo (command) {
        console.log('跳转')
        switch (command.parentid) {
          case 6:
            window.open(command.pclink)
            break
        }
      },

      /**
       * 跳转
       */
      jump (index) {
        this.navIndex = index
      },
      /**
       * 搜索
       */
      search () {
        (this.isShowSearch) ? (() => {
          this.isShowSearch = false
        })() : (() => {
          this.isShowSearch = true
        })()
      }
    }
  }
</script>
<style>
    @import "../../assets/thems/css/style.css";
    .el-header{
        padding: 0;
    }
    .el-menu-custom {
        padding: 0 1vw;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
    }
   .custom-logo{
       position: absolute;
       left: 0;
   }

    .slide-in-right {
        -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @-webkit-keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }
    .menu-item a{
        text-decoration:none;
        cursor: pointer;
    }

</style>


